<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    accept=".jpg,.jpeg,.png"
    action="#"
    :limit="1"
    :on-exceed="handleExceed"
    :on-success="handleExceed"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">选择</el-button>
    </template>
    <el-button class="ml-3" type="success" @click="submitUpload">提交</el-button>
    <template #tip> </template>
  </el-upload>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { genFileId } from 'element-plus';
  import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
  import { uploadFile } from '@/utils/methods';

  const upload = ref<UploadInstance>();
  const filesImg = ref<any>(null);

  const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles();
    const file = files[0] as UploadRawFile;
    file.uid = genFileId();
    upload.value!.handleStart(file);
    filesImg.value = files;
  };

  const submitUpload = () => {
    console.log(upload.value);
    uploadFile(
      'http://192.168.31.141:8004/roomConfiguration/uploadImage',
      { templateFile: filesImg.value, roomCode: '4F-A', projectCode: 'P12344545', type: 'image' },
      '',
      (response: any) => {
        console.log('changeBackgroundImg', response);
      }
    );
    upload.value!.submit();
  };
</script>

<!--<template>-->
<!--  <el-upload action="#" list-type="picture-card" :auto-upload="false">-->
<!--    <el-icon><Plus /></el-icon>-->

<!--    <template #file="{ file }">-->
<!--      <div>-->
<!--        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />-->
<!--        <span class="el-upload-list__item-actions">-->
<!--          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">-->
<!--            <el-icon><zoom-in /></el-icon>-->
<!--          </span>-->
<!--          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">-->
<!--            <el-icon><Download /></el-icon>-->
<!--          </span>-->
<!--          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">-->
<!--            <el-icon><Delete /></el-icon>-->
<!--          </span>-->
<!--        </span>-->
<!--      </div>-->
<!--    </template>-->
<!--  </el-upload>-->

<!--  <el-dialog v-model="dialogVisible">-->
<!--    <img w-full :src="dialogImageUrl" alt="Preview Image" />-->
<!--    <el-button class="ml-3" type="success" @click="handleDownload">提交</el-button>-->
<!--  </el-dialog>-->
<!--</template>-->

<!--<script lang="ts" setup>-->
<!--  import { ref } from 'vue';-->
<!--  import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';-->

<!--  import type { UploadFile } from 'element-plus';-->
<!--  import { uploadFile } from '@/utils/methods';-->

<!--  const dialogImageUrl = ref('');-->
<!--  const dialogVisible = ref(false);-->
<!--  const disabled = ref(false);-->

<!--  const handleRemove = (file: UploadFile) => {-->
<!--    console.log(file);-->
<!--  };-->

<!--  const handlePictureCardPreview = (file: any) => {-->
<!--    dialogImageUrl.value = file.url!;-->
<!--    dialogVisible.value = true;-->
<!--  };-->

<!--  const handleDownload = (file: UploadFile) => {-->
<!--    console.log(file);-->
<!--    uploadFile(-->
<!--      'http://192.168.31.141:8004/roomConfiguration/uploadImage',-->
<!--      { templateFile: file, roomCode: '4F-A', projectCode: 'P12344545', type: 'image' },-->
<!--      '',-->
<!--      (response: any) => {-->
<!--        console.log('changeBackgroundImg', response);-->
<!--      }-->
<!--    );-->
<!--  };-->
<!--</script>-->
